<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>脑经急转弯</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <style>
    html{
      height:100%;
    }
    body {
      padding:0;
      margin:0;
      border:0;
      font-size: 20px;
      line-height: 130%;
    }
    .container-view {
      position: absolute;
      width:100%;
      height: 100%;
    }
    .success-list-cell{
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .list-cell{
      padding-bottom: 20px;
    }
    .success-list-cell div{
      padding-top: 10px;
    }
    .list-cell div{
      padding-top: 10px;
    }
    .title{
      color: #000000;
      font-size: 24px;
    }
  </style>

</head>
<body>
<div class="container-view">
  <div style="width: 94%;margin:0 auto;color: #4a4a4a">
    <div class="success-list-cell">
      <span class="title">一、导航栏的使用</span>
      <img src="image/sm_01.png" style="width: 100%;margin-top: 10px"/>
      <div style="text-align: center">图①</div>
      <img src="image/sm_03.png" style="width: 100%;margin-top: 10px"/>
      <div style="text-align: center">图②</div>
      <div>Ⅰ、点击图①中的按钮1，会弹出急转弯分类列表图②，点击图②中的按钮3，会恢复到原来的页面状态。</div>
      <div>Ⅱ、点击图②中的列表4，菜单会自动关闭，并且急转弯列表会切换到所点击的分类。</div>
      <div>Ⅲ、点击图①中的搜索按钮2，会切换到搜索页面，可以搜索自己感兴趣的急转弯。</div>
    </div>
    <div class="list-cell">
      <span class="title">二、分页组件使用</span>
      <img src="image/sm_02.png" style="width: 100%;margin-top: 10px"/>
      <div style="text-align: center">图③</div>
      <div>Ⅰ、点击图③中的按钮5，切换列表中的数据到上一页。</div>
      <div>Ⅱ、点击图③中的按钮7，切换列表中的数据到下一页。</div>
      <div>Ⅲ、点击图③中的进度条6，能够快速切换数据的页数，方便快速翻页。</div>
    </div>
  </div>
</div>
</body>
</html>